<template>
  <div class="container">
    <div class="top">
      <div class="header">
        <a href="#/">
          <Logo class="logo"></Logo>
          <span class="title">学创校园</span>
        </a>
      </div>
      <div class="desc">
        学创校园 是谷阳世纪大厦最具影响力的 Web 组件范式
      </div>
    </div>
    <Result type="success" title="你的账户：AntDesign@example.com 注册成功" description="激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。" class="register-result">
      <template slot="actions">
        <Button type="primary" size="large" style="margin-right:8px;" @click="handleClick">查看邮箱</Button>
        <Button type="default" size="large" @click="handleClick">返回首页</Button>
      </template>
    </Result>
    <GlobalFooter :links="footLinks" class="footer">
      <div slot="copyright">Copyright &copy; 2017
        <strong>学创校园</strong> 团队出品</div>
    </GlobalFooter>
  </div>
</template>
<script>
import { Logo, Result, GlobalFooter } from '@/components'
export default {
  components: { Logo, Result, GlobalFooter },
  data() {
    return {
      footLinks: [
        {
          title: '首页',
          href: '/'
        },
        {
          title: '文档',
          href: '/'
        },
        {
          title: 'GitLab',
          href: 'https://gitlab.oneitfarm.com/ladybird/ui-nuclear',
          blankTarget: true
        }
      ]
    }
  },
  methods: {
    handleClick() {
      this.$router.push('/')
    }
  }
}
</script>
<style scoped>
.container {
  background: #f0f2f5;
  background-image: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
  width: 100%;
  min-height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  padding: 110px 0 144px 0;
  position: relative;
}

.top {
  text-align: center;
}

.header {
  height: 44px;
  line-height: 44px;
}

.header a {
  text-decoration: none;
}

.title {
  font-size: 33px;
  color: rgba(0, 0, 0, 0.85);
  font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-weight: 600;
  position: relative;
  top: 2px;
}

.desc {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 12px;
  margin-bottom: 40px;
}

.footer {
  position: absolute;
  width: 100%;
  bottom: 0;
}
</style>
<style>
.register-result .title {
  margin-top: 32px;
  font-size: 20px !important;
  line-height: 28px;
}
</style>
